Hello and welcome to this lecture.
In this lecture we are going to be creating this structure for our app using hates CML.
I am inside my text said it up so I'm just going to expand the directory and click on the history email
far.
So this is where I will create the hastier e-mail code for how our app to create the structure so the
way I'm going to structure this lecture is to add a chunk of code at a time and then explain the code
to you.
Okay I have add a chunk of code.
So from line 1 to 13 These are the basic tags.
You will see on any website or web application they or will have a doctype.
The hasty mail tag the head tag title and the body attack the online one the dog type basically is to
instruct or notify the web browsers or waivers can access this application to tell them that this document
you are about to view is in hastier mail document.
So is for instructional purposes.
The actual age of the email code is from line to to line 13 as you can notice the tags have been indented
so that you can see the parent and child relationship.
Clearly you can see that the head and the body are children of the hastier male element.
While the title is the child of the head element or tags are paid from line to line 13.
So we've got the plane which is the head we which is the here team are there and they got a closing
statement.
You can tell the distinction between the opening and closing tag because the closing tag has laid forward
slas before the name of the tank so you can see the dotted lines under there and dotted lines on the
there.
It means that the tags match fact do the same with the head in see the dotted line means there match
and then the body you can see they are match.
I have added some more chunk of good.
Line for 2 line 9.
The could have just added on.
So the metal tank mother type is Glee are used to provide information so most of the stuff in the head
section provide its frame information about the document at all so all you can add access to that external
document like this stylesheet on line 8 and these script on line 9.
Okay so the metal cast sets cast said basically this attribute here is a rebbe's and value every attribute
must have a value which is enclosed in quotes so the quotes there is utf.
Dash it what it may.
They met a car set.
Is the encoding type that this document supports most term utf that it is the standard encoding type
that most documents support there is a lot of the characters can be read the medder tank on line fighting
with the attribute of name value of description.
Also provide a description for the page content attribute is percentage later.
So all this information will help this search engines to serve up the request that if you are types
into the search into yes so for example if someone's looking for a tip calculator these information
are provided here in the headset that will guide them to this page.
Line six men a name here in the viewport you basically enables you to view enables the application to
the web page to be accessed and viewed correctly by any screen size regardless if it's a cell phone.
Were there lives a screen or tablet with a large screen or a 20 each monitor.
Regardless of the screen size it will automatically resize to fit that screen size.
That's what this line 6 is saying.
The initial dash skill is initial zaun that is set so he labels you to zoom in and zoom out of the device
and serve on the title line.
Is there a link to the external star she will be using.
Should this does show off here we are going to be using a jack us group library to create the functionality
for the app and that is called Jake Query.
We haven't got it installed.
We have a link to the library.
Google.
This is from Google so it's called a CDC link.
See the stands for content delivery network.
Sometime some of these content delivery networks like Google Microsoft and others they can host a lot
of these libraries for us.
The advantage of doing that is that they are current and they can be updated without you doing anything
or you need to do is add a link to that library which is what I have done in line 9.
I have added some one chunk of code from line 15 all the way to line twenty four.
So let me explain the code for you.
Line 14 here basically is the head tag which is a hate tag.
I'll use that to define the title the title of was called tip calculator and add it is span element
span enables you to join to text together.
So the Pierce one.
Given this man and idea of percent P L C and also give him the date at the hedin or detect that will
show what ahead then will be a tic calculator or key.
I'm going to enclose the actual calculator inside a form.
So this is a tankful of form.
I've given the form an A D attribute with the value of calculator every attribute must have its value
in quotes.
These are also important because you can use the idea to style the element would see assess on line
16 tasks a paragraph tack an inside an input as well got a paragraph an entire paragraph and got an
input tag with an idea of amount.
So this would be an input where something will be tapped in anything called the input means you have
to type something in line 17 and another paragraph and then next paragraph.
Got an input chord percentage.
So again this is something that you have to typing on line 19 in notice on line 18 here.
Got a comment.
This is how you write a comment it here.
Mail left angle brackets exclamation dash dash and then that any time there's a comment will not be
displayed by the web browser or comments that are useful.
You can use them to troubleshoot and see what works and what doesn't work so I don't need this Nigers
get rid of that.
And then on lying to me bring up a bit on line.
A team called paragraph tag as well with some techs and another input tag and have caught the attributes
for the tag and I've also got this attribute called Disabled with the value disabled.
What that means.
The disabled attribute is like a boolean attribute bullying means true or false when it is used.
It is specifies that the input elements should be disabled.
What that means is that no one use that cannot type anything inside this input box.
The reason for that is that I dont like the way the application will work.
They will type paying the bill amount the type of the percentage and then will he will calculate before
the input before this tip and total value are displayed.
So the calculator will control how these are displayed.
So these are disable them.
The users will not be able to enter or click on this case so the values will be populated by the caplet
option.
Line 20 got to know their input tag with an idea add up.
It says submit button so this is the button we use to perform the calculation on line twenty three is
the script.
This is a link to this script.
If I was going to use my own personal script and not the jacquier library this is where I will add it
so but for this projet be using the query library I'll be using the jaquie library bod.
I actually write in this script for the query inside my script file.
Even though I'm referencing this script I'm going to be writing it will be a query which is a javascript
library but it will be accessed in the library from Google even do specifying the script inside a Jav
a script file.
So that's set for this lecture on the structure of the application.
So if I saved the document open on the application you can see what it looks like.
I just double click and call index it can see what their application looks like at the moment so this
is what the application looks like at the moment we've just created this structure using hastier mail
like flexural will be applying stylin to make it look prettier.
Thanks for watching.
It.